<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 驾驶员考核和评价明细 -->
    <a-form-model ref="ruleForm" :model="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
      <a-spin :spinning="loading">
        <!-- 基本信息 -->
        <a-card :bordered="false">
          <title-name title="基本信息"></title-name>
          <custom-form :formList="formList" :form="form" editModel="V"> </custom-form>
        </a-card>
        <!-- 满意度调查记录和日常考核记录 -->
        <a-card :bordered="false">
          <title-name :title="`${checkType == 2 ? '考核' : '满意度评价'}明细`"></title-name>
          <!-- 表格 -->
          <a-table
            bordered
            ref="table"
            rowKey="key"
            :columns="columns"
            :data-source="loadData"
            :pagination="false"
            class="mb20"
          >
            <template slot="child" slot-scope="text">
              <template v-if="checkType == 2">
                <div v-for="(item, index) in text" :key="index" class="mb12">
                  <a-checkbox :default-checked="item.checked" disabled
                    ><span class="text_color">{{ item.label }}</span></a-checkbox
                  >
                </div>
              </template>
              <template v-if="checkType == 1">
                <span v-for="(item, index) in text" :key="index" class="mr20">
                  {{ item.label }}
                </span>
              </template>
            </template>
          </a-table>
          <a-row type="flex" v-if="checkType == 2">
            <div class="ml12">照片：</div>
            <div v-if="!form.fileInfoVOS || form.fileInfoVOS.length === 0">无</div>
            <div v-else class="ml20">
              <l-table
                uploadType="image"
                :disabled="true"
                :editModel="0"
                :uploadArrys.sync="form.fileInfoVOS"
                multiple
              ></l-table>
            </div>
          </a-row>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button type="primary" @click="handleActiveClose">关闭</a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
import { carUsePersonScore, carDriverAssess } from '@/api/office/vehicle/config' // api
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置

export default {
  name: 'driverManagementDetail',
  extends: new BaseEditPage(),
  data() {
    return {
      loading: false, // 提交按钮loding
      form: {}, // 表单
      loadData: [], // 表格列表
    }
  },
  mounted() {
    this.$route.meta.title = this.checkType == 2 ? '考核明细' : '满意度评价明细'
    // 不为添加时请求详情
    this.loading = true
    let api = this.checkType == 1 ? carUsePersonScore : carDriverAssess
    api
      .detail({ id: this.id })
      .then((res) => {
        this.loading = false
        // 映射表单
        this.form = res.data
        if (this.checkType == 2) {
          /**
           * 渲染考核列表
           */
          let datas = res.data.assessDetail ? JSON.parse(res.data.assessDetail) : [] // 考核列表
          // 添加序号
          if (datas?.length > 0) {
            datas.forEach((item, index) => {
              item.key = index + 1
            })
          }
          this.loadData = datas
        } else if (this.checkType == 1) {
          /**
           * 渲染满意度评价列表
           */
          if (res.data.options) {
            this.getData(JSON.parse(res.data.options))
          }
        }
        // 添加总分项
        this.loadData.push({
          key: this.loadData.length + 1,
          [this.checkType == 1 ? 'typeName' : 'label']: '总分',
          [this.checkType == 1 ? 'result' : 'curScore']:
            this.checkType == 1 ? { score: res.data.fraction || 0 } : res.data.score || 0,
        })
      })
      .catch(() => {
        this.loading = false
      })
  },
  computed: {
    // 表头
    columns() {
      let that = this
      let columns = [
        {
          title: '序号',
          width: 80,
          dataIndex: 'key',
          customRender() {
            return arguments[0] !== that.loadData.length ? arguments[0] : ''
          },
        },
        {
          title: `${this.checkType === '2' ? '检查项-大类' : '题目'}`,
          dataIndex: 'label',
        },
        {
          title: `${this.checkType === '2' ? '检查项-小类' : '选项'}`,
          dataIndex: 'child',
          width: this.checkType === '2' ? 800 : 550,
          scopedSlots: { customRender: 'child' },
        },
        {
          title: `${this.checkType === '2' ? '分值计算规则' : '评价人选择项'}`,
          dataIndex: this.checkType === '2' ? 'score' : 'result',
          ellipsis: true,
          customRender() {
            return that.checkType === '2'
              ? arguments[0]
              : arguments[2] !== that.loadData.length - 2
              ? arguments[0]?.choosed
              : arguments[0]
          },
        },
        {
          title: '得分',
          width: 100,
          dataIndex: this.checkType === '2' ? 'curScore' : 'result.score',
          customRender() {
            return arguments[0] || 0
          },
        },
      ]
      if (this.checkType == 1) {
        columns.splice(1, 0, {
          title: '满意度类型',
          dataIndex: 'typeName',
          customRender: (value, row) => {
            const obj = {
              children: value,
              attrs: {},
            }
            obj.attrs.rowSpan = row.rowSpan
            return obj
          },
        })
      }
      return columns
    },
    // 表单列表
    formList() {
      return [
        {
          keyName: 'driverName',
          label: '驾驶员姓名',
        },
        {
          keyName: this.checkType == 2 ? 'createUserName' : 'creator',
          label: (this.checkType == 2 ? '考核' : '评价') + '人',
        },
        {
          keyName: this.checkType == 2 ? 'createTime' : 'scoreTime',
          label: (this.checkType == 2 ? '考核' : '评价') + '时间',
        },
      ]
    },
  },
  methods: {
    /**
     * 遍历树获取满意度评价明细
     */
    getData(data, name) {
      for (let i = 0; i < data.length; i++) {
        let node = data[i] // 节点
        let nodeName = node.label
        // 若有子级则继续遍历，否则添加到列表
        if (node.child?.length > 0 && !node.result) {
          this.getData(node.child, nodeName)
        } else {
          node.typeName = name
          // 相同满意度类型合并，并设置合并参数
          if (i == 0) {
            node.rowSpan = data.length
          } else {
            node.rowSpan = 0
          }
          // 添加序号
          node.key = (this.loadData?.length || 0) + 1
          this.loadData.push(this.$clone(node))
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.text_color {
  color: #666;
}
</style>